/**
 * 壁纸上传页面逻辑
 */
document.addEventListener('DOMContentLoaded', () => {
    // DOM元素 - 使用懒加载方式获取DOM元素，提高初始化速度
    const elements = {};
    
    function getElement(id) {
        if (!elements[id]) {
            elements[id] = document.getElementById(id);
        }
        return elements[id];
    }
    
    // 状态
    const state = {
        selectedFile: null,
        tags: new Set(),
        isUploading: false,
        loadCategories: false
    };


    /**
     * 加载分类数据
     */
    async function loadCategories() {
        if (state.loadCategories) return;
        state.loadCategories = true;
        
        try {
            const response = await API.getCategories();
            const categories = response.data;
            
            // 清除默认选项
            const categorySelect = getElement('category');
            categorySelect.innerHTML = '<option value="">请选择分类</option>';
            
            // 添加分类选项
            categories.forEach(category => {
                const option = document.createElement('option');
                option.value = category.id;
                option.textContent = category.name;
                categorySelect.appendChild(option);
            });
        } catch (error) {
            console.error('加载分类失败:', error);
        }
    }
    
    /**
     * 绑定关键事件处理（影响页面初始响应的事件）
     */
    function bindCriticalEvents() {
        // 只绑定最关键的事件，其他可以延迟绑定
        const uploadArea = getElement('upload-area');
        const fileInput = getElement('file-input');
        
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });
        
        fileInput.addEventListener('change', handleFileSelect);
    }

    /**
     * 绑定事件处理（可以延迟绑定的事件）
     */
    function bindEvents() {
        // 拖拽上传
        const uploadArea = getElement('upload-area');
        
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFile(files[0]);
            }
        });

        // 标签输入处理
        const tagInput = getElement('tag-input');
        tagInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                addTag(e.target.value.trim());
                e.target.value = '';
            }
        });

        // 表单提交
        const uploadForm = getElement('upload-form');
        uploadForm.addEventListener('submit', handleSubmit);
        
        // 表单验证
        ['title', 'description', 'category'].forEach(id => {
            const element = getElement(id);
            element.addEventListener('input', validateForm);
        });
    }

    /**
     * 处理文件选择
     */
    function handleFileSelect(e) {
        const files = e.target.files;
        if (files.length > 0) {
            handleFile(files[0]);
        }
    }

    /**
     * 处理文件
     */
    function handleFile(file) {
        // 验证文件类型
        if (!file.type.startsWith('image/')) {
            showFileError('请选择图片文件');
            return;
        }

        // 验证文件大小（最大10MB）
        if (file.size > 10 * 1024 * 1024) {
            showFileError('文件大小不能超过10MB');
            return;
        }

        // 清除错误提示
        clearFileError();

        // 更新状态
        state.selectedFile = file;

        // 预览图片
        const reader = new FileReader();
        reader.onload = (e) => {
            getElement('preview-image').src = e.target.result;
            getElement('preview-container').classList.add('show');
            validateForm();
        };
        reader.readAsDataURL(file);
    }

    /**
     * 添加标签
     */
    function addTag(tag) {
        if (!tag) return;

        // 验证标签长度
        if (tag.length > 20) {
            showTagsError('标签长度不能超过20个字符');
            return;
        }

        // 验证标签数量
        if (state.tags.size >= 5) {
            showTagsError('最多添加5个标签');
            return;
        }

        // 清除错误提示
        clearTagsError();

        // 添加标签
        if (state.tags.add(tag)) {
            const tagElement = document.createElement('div');
            tagElement.className = 'tag';
            tagElement.innerHTML = `
                <span>${tag}</span>
                <i class="ri-close-line"></i>
            `;

            // 删除标签
            tagElement.querySelector('i').addEventListener('click', () => {
                state.tags.delete(tag);
                tagElement.remove();
                validateForm();
            });

            getElement('tags-container').insertBefore(tagElement, getElement('tag-input'));
            validateForm();
        }
    }

    /**
     * 处理表单提交
     */
    async function handleSubmit(e) {
        e.preventDefault();

        if (state.isUploading) return;

        try {
            state.isUploading = true;
            getElement('submit-btn').disabled = true;
            getElement('progress-bar').classList.add('show');

            // 创建FormData
            const formData = new FormData();
            formData.append('file', state.selectedFile);
            formData.append('title', getElement('title').value);
            formData.append('description', getElement('description').value);
            formData.append('categoryId', getElement('category').value);
            formData.append('tags', Array.from(state.tags).join(','));

            // 上传文件
            const response = await API.uploadWallpaper(formData, (progress) => {
                getElement('progress').style.width = `${progress}%`;
            });

            // 上传成功
            showToast('壁纸上传成功');
            resetForm();

        } catch (error) {
            console.error('上传失败:', error);
            showToast('上传失败，请重试');
        } finally {
            state.isUploading = false;
            getElement('submit-btn').disabled = false;
            getElement('progress-bar').classList.remove('show');
        }
    }

    /**
     * 验证表单 - 添加节流，避免频繁验证
     */
    const validateForm = (() => {
        let timeout = null;

        return function() {
            if (timeout) clearTimeout(timeout);

            timeout = setTimeout(() => {
                const titleValid = getElement('title').value.trim() !== '';
                const descriptionValid = getElement('description').value.trim() !== '';
                const categoryValid = getElement('category').value !== '';
                const fileValid = state.selectedFile !== null;

                // 基本验证：文件、标题、描述和分类是必填的，标签可选
                const isValid = fileValid && titleValid && descriptionValid && categoryValid;

                const submitBtn = getElement('submit-btn');
                submitBtn.disabled = !isValid;

                // 添加/移除禁用状态的样式类
                if (isValid) {
                    submitBtn.classList.remove('disabled');
                } else {
                    submitBtn.classList.add('disabled');
                }

                timeout = null;
            }, 100);
        };
    })();

// 在init函数中添加初始验证
    async function init() {
        // 先绑定关键事件
        bindCriticalEvents();

        // 异步加载分类
        loadCategories();

        // 其余事件绑定
        bindEvents();

        // 初始验证
        validateForm();

        // 确保按钮初始状态正确
        getElement('submit-btn').disabled = true;
        getElement('submit-btn').classList.add('disabled');
    }

    /**
     * 重置表单
     */
    function resetForm() {
        // 重置文件
        state.selectedFile = null;
        getElement('file-input').value = '';
        getElement('preview-container').classList.remove('show');
        getElement('preview-image').src = '';

        // 重置标签
        state.tags.clear();
        const tags = getElement('tags-container').querySelectorAll('.tag');
        tags.forEach(tag => tag.remove());

        // 重置其他字段
        getElement('title').value = '';
        getElement('description').value = '';
        getElement('category').value = '';
        getElement('tag-input').value = '';

        // 重置状态
        validateForm();
    }

    /**
     * 显示文件错误
     */
    function showFileError(message) {
        getElement('file-error').textContent = message;
    }

    /**
     * 清除文件错误
     */
    function clearFileError() {
        getElement('file-error').textContent = '';
    }

    /**
     * 显示标签错误
     */
    function showTagsError(message) {
        getElement('tags-error').textContent = message;
    }

    /**
     * 清除标签错误
     */
    function clearTagsError() {
        getElement('tags-error').textContent = '';
    }

    /**
     * 显示提示消息 - 使用现有的toast或创建新的
     */
    function showToast(message) {
        let toast = document.querySelector('.toast');
        
        // 如果已有toast，更新内容
        if (toast) {
            toast.textContent = message;
            toast.classList.remove('show');
            void toast.offsetWidth; // 强制重绘
        } else {
            // 创建新toast
            toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
        }

        // 显示toast
        setTimeout(() => {
            toast.classList.add('show');
        }, 10);

        // 隐藏toast
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => {
                if (toast.parentNode) {
                    document.body.removeChild(toast);
                }
            }, 300);
        }, 2000);
    }

    // 初始化 - 使用requestIdleCallback优化执行时机
    if (window.requestIdleCallback) {
        requestIdleCallback(() => init());
    } else {
        setTimeout(init, 0);
    }
}); 